<html>
<head>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />	
<script src="js/jquery-1.3.2.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script>

// changed from http://docs.jquery.com/Traversing/end

$(document).ready(function(){
    
    jQuery.fn.showTags = function (n) { // <-- jQuery.fn.someMethod
      var tags = this.map(function () { // get tag names from 'this'
                              return this.tagName; 
                            })
                        .get().join(", ");
      $("b:eq(" + n + ")").text(tags);        // stick text inside bold element 0, 1, or 2
      return this;
    };

    $("p").showTags(0)
          .find("span")
          .showTags(1)
          .css("background", "yellow")
          .end()  // concept: if not here, only spans are italicized
          .showTags(2)
          .css("font-style", "italic");
  });

</script>
</head>

<body>
  <p>
    Hi there <span>how</span> are you <span>doing</span>?
  </p>
  <p>
    This <span>span</span> is one of 
    several <span>spans</span> in this
    <span>sentence</span>.
  </p>
  <div>
    Tags in jQuery object initially: <b></b> <!-- 0th b tag -->
  </div>
  <div>
    Tags in jQuery object after find: <b></b>  <!-- 1 b tag -->
  </div>
  <div>
    Tags in jQuery object after end: <b></b>    <!-- 2 b tag -->
  </div>

</body>
</html>